// 菜单管理
<template>
  <div class="big_box" id="userBig">
    <el-tabs class="scorllFixed" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.path" v-for="item in jurisdiction" :key="item.name">
        <router-view v-if="activeName === item.path"></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { setUrl } from '@/utils/getUrl.js'
import { getAuthority } from '@/assets/js/getAuthority.js'
export default {
  data() {
    return {
      activeName: 'menuManagement',
      jurisdiction: [],
    }
  },
  watch: {
    // 监听url中的hash值的变化
    $route(to, from) {
      const hashUrl = window.location.hash.substr(2)
      if (hashUrl.startsWith('menuManagement')) {
        this.activeName = 'menuManagement'
      }
    },
  },
  created() {
    getAuthority(this, 'menuManagementKey') // 获取权限
  },
  mounted() {},
  updated() {},
  destroyed() {
    // 默认
    setUrl('menuManagementKey', '')
  },
  methods: {
    // 刷新右侧需要调用的函数
    getChildRefresh() {
      getAuthority(this, 'menuManagementKey') // 获取权限
    },
    handleClick(tab, event) {
      setUrl('menuManagementKey', tab.name)
      if (tab.name === 'menuManagement') {
        this.$router.push('/menuManagement')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav-scroll {
  position: relative !important;
  //   width: 0 !important;
}
.xiaoxiao {
  padding: 15px;
  box-sizing: border-box;
  .big_box {
    padding-top: 15px;
  }
}
</style>
